<template>
    <div class="houseInfoContatin"> 
        <div class="house_head">
            <h3>{{title}}</h3>
            <p>发布日期:2012-11-44 23:23:44</p>
        </div>

        <div class="house_body">
            <div class="house_img">
                 <img class="preview-img"  v-for="(item, index) in images" :key="item.id" :src="item.src" height="60" @click="$preview.open(index, images)"> 
            </div>
            <p class="house_info">{{address}}</p>
        </div>

        <chy-comment ref="commentCom"  :itemId = "id" :saveUrl = "saveUrl" :commentUrl = "commentUrl"></chy-comment>

    </div>
</template>

<script>
import {Toast} from 'mint-ui';

export default {
    data(){
        return {
            id:null,
            title:"",
            images:[],
            address:"",
            commentUrl:"imageShare/getComment",
            saveUrl:"imageShare/save",
        }
    },
    created() {
        this.id = this.$route.params.id;
        this.initData()
         
    },
    mounted() {
        this.$refs.commentCom.statrtloard();
    },
    methods:{
        initData(){
            let opction = {
                params:{
                    id:this.id
                }
            }
            this.$http.get("imageshare/getInfo",opction).then(res=>{
                if(!res.ok){
                    Toast("数据请求失败");
                    return
                }
                let data = res.body.data;
                this.title = data.title;
                this.address = data.address;

                let imgs = data.info.images;
                let img = imgs.map((v,i)=>{
                    return {
                        "src":v,
                        "id":i,
                        "w":600,
                        "h":450
                    }
                }); 
                this.images = img;
            });
        }
    }


}
</script>

<style scoped>

    .house_img img{
        margin: 5px;
      box-shadow: 0 0 8px #999;
        
    }

     .house_img{
        
     }
    



   .house_head h3 {
        font-size: 15px;
        text-align: center;
        color: #5899a5;
        margin-bottom: 7px;
        
    }

    .house_head p{
        margin-bottom: 2px;
        font-size: 12px;
    }

    .house_head{
        border-bottom: 1px solid #888;
        margin-bottom: 5px;
    }

    .houseInfoContatin{
        padding: 7px;
        
    }

</style>
